import { init } from 'echarts';
import { Pattern } from 'fabric';
import { createApp } from 'vue';

/**
 * 获取文字水印图片的 Data URL
 * @param {Object} [params] 文字水印配置
 * @param {number} [params.width] 图片宽度
 * @param {number} [params.height] 图片宽度
 * @param {string} [params.text] 文字
 * @param {number} [params.fontSIze] 字号大小
 * @param {number} [params.alpha] 文字透明度
 * @param {number} [params.rows] 文字排列行数
 * @param {number} [params.cols] 文字排列列数
 * @param {string} [params.fontFamily] 文本字体
 * @param {string} [params.color] 文本颜色
 * @param {number} [params.angle] 文本旋转角度
 * @returns {string} 水印链接
 */
export const generateMarkDataURL = (params) => {
  const {
    width = 400,
    height = 400,
    text = '水印水印',
    fontSize = 20,
    alpha = 0.07,
    rows = 8,
    cols = 8,
    fontFamily = 'Arial',
    color = '#000',
    angle = 0,
  } = params || {};
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  canvas.width = width;
  canvas.height = height;
  ctx.font = `${fontSize}px ${fontFamily}`;
  ctx.fillStyle = color;
  ctx.globalAlpha = alpha;

  const textWidth = ctx.measureText(text).width;
  const xPadding = (width - cols * textWidth) / (cols + 1);
  const yPadding = (height - rows * fontSize) / (rows + 1);
  let x = xPadding;
  let y = yPadding;
  while (y < canvas.height - yPadding) {
    if (angle) {
      // 渲染一定角度的文本
      ctx.save();
      ctx.translate(x, y);
      ctx.rotate(angle);
      ctx.fillText(text, 0, 0);
      ctx.restore();
    } else {
      ctx.fillText(text, x, y);
    }

    x += textWidth + xPadding;
    if (x > canvas.width - xPadding) {
      x = xPadding;
      y += yPadding;
    }
  }

  const dataURL = canvas.toDataURL();
  canvas.remove();

  return dataURL;
};

/**
 * 渲染 Vue 组件
 * @param {Object} shape 组件参数
 * @param {VueComponent} component Vue 组件
 * @returns {Object} Vue 组件实例
 */
export function createUI(shape, component) {
  const app = createApp(component);
  const elem = document.createElement('div');
  document.body.appendChild(elem);
  app.mount(elem);
  let instance = app._instance?.exposed;
  instance.initial(shape);

  instance.removeSelf = () => {
    app.unmount();
    document.body.removeChild(elem);
  };

  return instance;
}

/**
 * 创建 echart
 * @param {Object} settings 图形配置
 * @returns {Object} echart 实例
 */
export function createChart(settings) {
  const element = settings.element || document.createElement('canvas');
  const instance = init(element, undefined, {
    devicePixelRatio: 2,
    width: settings.width,
    height: settings.height,
  });

  instance.setOption({
    render: 'canvas',
    tooltip: {
      renderMode: 'richText',
    },
  });

  return instance;
}

export function getCardContentSize(
  cardWidth,
  cardHeight,
  contentHeight,
  padding = 8,
) {
  return {
    width: cardWidth - padding * 2,
    height: contentHeight,
    top: cardHeight - contentHeight - padding,
    left: padding,
  };
}

export function transSVGToImg(svg) {
  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}

export function setBackgroundImg(fabricObj, imgSrc) {
  const patternImg = new Pattern({
    source: imgSrc, // 替换为实际的背景图像路径
    repeat: 'repeat', // 设置重复模式，可以是 'repeat'、'repeat-x'、'repeat-y' 或 'no-repeat'
  });
  fabricObj.set({
    backgroundColor: patternImg,
  });
}
